<template>
    <div>
        <HomeView></HomeView>
      <h2>订单详情</h2>
      <!-- 展示订单信息 -->
      <div class="information" >
        <div class="imgbox" style="display: block;">
            <img :src="vehicle.image" alt="vehicle Image" class="img"></div>
        <div class="text" style="display: block;">
            <p class="name">{{ vehicle.brand }}</p>
            <p style="margin: 10px;">单价: {{ vehicle.price }}/天</p>

            <div class="block" style="margin: 10px;">
            <span class="demonstration">租赁日期</span>
            <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @input="changeTime">
            </el-date-picker>
            <div class="day">
                <p v-if="days !== null" class="days">租赁天数：{{ days }}天</p>
                <p v-if="days !== null" class="days">总价钱：{{ money }}元</p>
                <p v-if="days !== null" class="days">取车地点：{{ vehicle.address }}</p>
                <p v-if="days !== null" class="days">取车人联系方式：{{ phone }}</p>
                <p v-if="days !== null" class="days">取车人：{{ username }}</p>
            </div>
            </div>

            <el-button type="primary" round  @click="submitOrder">提交订单</el-button>
        </div>
      </div> 
      
    </div>
  </template>
  
  <script>
  import HomeView from './HomeView.vue';

export default {

    name:'order',


    data() {
        return {
            vehicle: '',
            value:'',
            days:null,
            money:null,
            disabled:false,
            username:this.$store.state.user.cname
        }
    },

    mounted() {
        console.log('---')
        console.log(this.$route.params.vehicle)
        console.log('---')
        this.vehicle = this.$route.params.vehicle
        this.username = JSON.parse(localStorage.getItem('user')).cname
        this.phone = JSON.parse(localStorage.getItem('user')).phone
        console.log(this.vehicle.carKey)
    },
    components:{
        HomeView
    },
    methods: {
        getNowFormatDate(date) {
            var year = date.getFullYear() //获取完整的年份(4位)
            var month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
            var strDate = date.getDate() // 获取当前日(1-31)
            if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
            if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
            
            return `${year}-${month}-${strDate}`
            },
      submitOrder() {
        // 提交订单逻辑...
        // 提交成功后跳转到订单管理页面
        // date = getNowFormatDate(this.value[0])
        this.date =  this.getNowFormatDate(this.value[0])
        this.$axios.post('/orders/addOrders',{
                date:this.date,
                time:this.days,
                amount:this.money,
                carKey:this.vehicle.carKey,
                custKey:JSON.parse(localStorage.getItem('user')).custKey,
                status:1
           
        },
        {
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              })
        this.$message.success("提交订单成功")
        this.$router.push('myorder');
      },
      changeTime(e){
        if(this.value && this.value.length==2){
            const startDate = this.value[0];
            const endDate = this.value[1];
            const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
            const diffInMilliseconds = Math.abs(startDate - endDate);
            const diffInDays = Math.round(diffInMilliseconds / millisecondsPerDay) + 1;
            this.days = diffInDays;
            // this.days = getNowFormatDate(diffInDays);
            this.money=this.vehicle.price*this.days
            
        }
        else{
            this.days=null
        }
        this.$forceUpdate()
      },

    }

}
</script>

<style>
.input {
    width: 50px;
}
h2 {
    text-align: center;
    margin: 20px;
}
.information {
    display: flex;
    flex-wrap:wrap;
}

.imgbox {
    width: 50%;
}
.img {
    width: 80%;
    margin: auto;
}
.text {
    width: 50%;
}
.name {
    font-size: larger;
    color:red;
    margin: 10px;
}
.days {
    margin-top: 10px;
    font-size: large;
}

</style>
  